<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta name="renderer" content="webkit" />
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />
		

		

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />

		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />
		<!-- 本页面css -->
		<link rel="stylesheet" href="./css/index.css" />
		



	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderList-wrapper table-wrapper section" v-cloak>
			<div class="orderList-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">费用中心</span>
					<span class="nav-item">订单管理</span>
				</div>
				<div class="form-wrapper">
					<span class="from-title">
					订单管理</span>
					<div class="button-wrapper  fboxRow">
						<div class="button-wrapper-left fboxRow">
							<div @click="handleClickCreateOrder" class="yzButton newServer active">新建订单</div>
							
							<el-date-picker
							class="mr-20"
							prefix-icon="el-icon-date"
							value-format="timestamp"
							@change="changeOrderselectTime"
							  v-model="orderTimeRange"
							  type="datetimerange"
							  range-separator="至"
							  start-placeholder="开始日期"
							  end-placeholder="结束日期">
							</el-date-picker>
							
							<el-select class="slot-elselect mr-20"  @visible-change="watchOrderType" @change="changeOrderType" placeholder="">
								<template slot="prefix">
									{{getselectOrderName()}}
								</template>
								<el-option  :class="{'yzhover':item.value === selectOrderType && isFirstShowOrderType,'selected':item.value === selectOrderType}" v-for="(item,index) in orderTypeGroup" :label="item.label"  :value="item.value">
								</el-option>
							</el-select>
							<el-input
							class="mr-20"
								maxlength="50"
								@keyup.enter.native="gotoOrderSolveBykeyword"
								class="button-wrapper-right"
								style="width: 220px"
							    placeholder="请输入搜索内容"
							    v-model="searchkeywords">
								<i @click="gotoOrderSolveBykeyword" slot="suffix" class="el-input__icon el-icon-search"></i>
							  </el-input>

						</div>
						<i @click="resetSearchParam" class="icon el-icon-refresh">
					  
						</i>

						
					</div>

					<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">



						<el-table-column label="订单编号" width="auto">
							<template slot-scope="scope">
								{{scope.row.id}}
							</template>

						</el-table-column>
						
						
						<el-table-column label="产品名称" width="auto">
							<template slot-scope="scope">
								{{scope.row.productName}}
							</template>
						</el-table-column>
						
						<el-table-column label="创建时间" width="auto">
							<template slot-scope="scope">
								{{scope.row.createTime}}
							</template>
						</el-table-column>
						
						<el-table-column label="订单金额" width="auto">
							<template slot-scope="scope">
								{{scope.row.price}}
							</template>
						</el-table-column>
						
						<el-table-column width="auto" label="订单类型">
							<template slot-scope="scope">
								{{scope.row.orderType}}
							</template>
						</el-table-column>
						
						<el-table-column width="auto" label="订单状态">
							<template slot-scope="scope">
								<div v-html="handlestatus(scope.row)"></div>
							</template>
						</el-table-column>




						<el-table-column label="操作">
							<template slot-scope="scope">
								<span style="color: #6462F3;" @click="handleClicklookorderRecord(scope.row)"  class="opearButton">查看</span>
								<span  v-if="scope.row.status === 'noPay'" style="color: #F21C30;" @click="handleClickCloseorderRecord(scope.row)"  class="opearButton ml-30">取消</span>
							</template>
						</el-table-column>


					</el-table>
						<div class="pagination-wrapper">
						  <div class="total-wrapper">
							  <span class="totalSize">共有 {{pageInfo.totalSize}} 条记录</span>
							  <el-select @change="handleSizeChange" v-model="pageInfo.pagesize">
								    <el-option
								      v-for="item in pageOptions"
								      :key="item.value"
								      :label="item.label"
								      :value="item.value">
								    </el-option>
							  </el-select>
						  </div>
						  <el-pagination
							:page-size="pageInfo.pagesize"
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="pageInfo.currentPage"
							layout="prev, pager, next, jumper"
							:total="pageInfo.totalSize">
						  </el-pagination>
						</div>
				</div>
			</div>

			<el-dialog style="box-sizing: border-box;" width="460px" class="yz-el-dialog" :visible.sync="cancelDialogVisble">
				<div slot="title" class="dialog-title">
					提示
				</div>
				<div class="dialog-content">
					<div class="dialog-content-infowrapper fboxRow mb-20">
						<img class="mr-20 flagImg" src="../img/warning-orange02.png"/>
						<p class="fboxCenter" style="line-height: 25px;">
							您确定要取消订单编号为：{{getactiveOrderId()}} 的订单吗?
						</p>
					</div>
					
					
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmCancelOrder" class="yzButton  confirm">确认</div>
						<div @click="cancelDialogVisble = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderList-wrapper',
				data: function() {
					return {
						isFirstShowOrderType:true, // 是否是第一次展示工单类型
						selectOrderType: 'allOrder', // 选中订单类型  默认为全选
						orderTypeGroup:[
						{
							label: '全部',
							value: 'allOrder'
						},
						{
							label:'已支付',
							value: 'alredyPay'
						},{
							label: '未支付',
							value: 'noPay'
						},{
							label:'已取消',
							value: 'alreadyCancel'
						}],
						orderTimeRange:undefined, // 订单选择时间
						searchkeywords:undefined, //  搜索关键字
						// 表格数据
						tableData: [{
							id: '12345738',
							createTime: '2020-11-25  11:24:46', // 修改时 变化的
							status:'alredyPay',
							orderType: '技术', // 初始的
							productName: '服务器无法打开',
							price:'123'
						},{
							id: '12345738',
							createTime: '2020-11-25  11:24:46', // 修改时 变化的
							status:'alreadyCancel',
							orderType: '技术', // 初始的
							productName: '服务器无法打开',
							price:'123'
						},{
							id: '3333',
							createTime: '2020-11-25  11:24:46', // 修改时 变化的
							status:'noPay',
							orderType: '技术', // 初始的
							productName: '服务器无法打开',
							price:'123'
						},{
							id: '12345738',
							createTime: '2020-11-25  11:24:46', // 修改时 变化的
							status:'alredyPay',
							orderType: '技术', // 初始的
							productName: '服务器无法打开',
							price:'123'
						},{
							id: '11111',
							createTime: '2020-11-25  11:24:46', // 修改时 变化的
							status:'alredyPay',
							orderType: '技术', // 初始的
							productName: '服务器无法打开',
							price:'123'
						}],
						// 分页信息
						pageInfo: {
							pagesize: 8,
							currentPage:1,
							totalSize: 41
						},
						pageOptions: [{
						  value:  6,
						  label: '6条/页'
						}, {
						  value:  8,
						  label: '8条/页'
						},{
						  value:  10,
						  label: '10条/页'
						}],
						cancelDialogVisble:false, // 取消订单弹框
						activeOrder:undefined, // 选中的订单
					}
				},

				methods: {
					// 获取订单id
				getactiveOrderId:function() {
					try{
						if(this.activeOrder && this.activeOrder.id) {
							return this.activeOrder.id
						}else {
								return ''
						}
					}catch(e){
						//TODO handle the exception
					}

				},
				
				// 确认取消订单
				confirmCancelOrder: _throttle(function() {
					console.log('确认取消订单')
					console.log(this.activeOrder)
					this.cancelDialogVisble = false
				}),
					
				// 创建工单的方法
				handleClickCreateOrder:_throttle(function() {
					console.log('点击新建订单按钮')

				}),	
				// 获取选择的状态名称
				getselectOrderName:function() {
					let name = ''
					let that = this
					this.orderTypeGroup.forEach(function(item){
						if(item.value === that.selectOrderType) {
							if(item.value === 'allOrder') {
								name =  '订单状态'
							}else {
								name =  item.label 
							}
						}
					})
					return name
				},
				// 改变工单类型
				changeOrderType: function(e) {
					
					this.selectOrderType =  e
					console.log(e)
					console.log('这里要重新发起请求  重要参数 selectOrderType')
				}, 
				// 工单类型下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false
				watchOrderType:function(e) {
					if(e) {
						$('.el-select-dropdown__item').removeClass('hover')
						this.isFirstShowOrderType =  true
					}
				},
				//改变订单选择时间
				changeOrderselectTime:function(val) {
					console.log(val)
					console.log(this.orderTimeRange)
				},
				// 通过订单编号  搜索订单
				gotoOrderSolveBykeyword: function() {
					if(this.searchkeywords === '' ||  this.searchkeywords === undefined) {
						return 
					}
					console.log('获取订单数据',this.searchkeywords)
				},
				// 重置搜索参数
				resetSearchParam: _throttle(function() {
					$('.icon.el-icon-refresh').addClass('active')
					this.isFirstShowOrderType =  true
					this.selectOrderType = 'allOrder'
					this.orderTimeRange =  undefined
					this.searchkeywords = undefined
					setTimeout(function(){
						$('.icon.el-icon-refresh').removeClass('active')
						// 这里模拟后台请求接口完毕
					},1500)
					console.log('重置搜索参数')
				}),
				// 点击取消订单
				handleClickCloseorderRecord:_throttle(function(row) {
					console.log('点击取消订单')
					this.activeOrder =  row
					this.cancelDialogVisble = true
				}),
				//处理状态
				handlestatus: function(row) {
					//  运行中 alive   启动中 start   关机中 closing;  已关机  closed;   timeout  已过期; 重启中 restarting；释放 release；
					switch (row.status) {
						case 'noPay':
							return '<p style="color:#FF9416">未支付</p>'
						case 'alredyPay':
							return '<p style="color:#3FBF70">已支付</p>'
						case 'alreadyCancel':
							return '<p>已取消</p>'
						default:
							break;
					}
				
				},
				handleSizeChange:function(e) {
									console.log(e)
				},
				handleCurrentChange:function(val) {
									console.log('当前页为xxxxx')
				},
				// 点击查看工单
				handleClicklookorderRecord:_throttle(function(row) {
					console.log('点击查看工单')
					window.open('detail.html?id=' + row.id, '_self')
				}),

				
				
				
				},
				mounted: function() {
					console.log('这个逻辑还未实现 当订单从创建起始超过半个小时还未支付，订单状态自动变为已取消')

				}

			})
		</script>
	</body>
</html>
